<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./index.js"></script>
    <script>
        const proxyUser1 = shallowReactive({
            name: "小明",
            cars: {
                color: "red"
            }
        })

        // proxyUser1.name = '小红'//拦截了修改数据或者是添加属性
        // proxyUser1.name += '--'  //拦截了读取数据   拦截了修改数据或者是添加属性
        // proxyUser1.cars.color += '--' //拦截了读取数据  浅 拦截不到写数据
        // delete proxyUser1.name //拦截到了删除数据
        // delete proxyUser1.cars.color //拦截了读取数据  浅


        const proxyUser2 = reactive({
            name: "小明",
            cars: {
                color: "red"
            }
        })

        // proxyUser2.name = '小红' //拦截了修改数据或者是添加属性
        // proxyUser2.name += '--' //拦截了读取数据   拦截了修改数据或者是添加属性
        // proxyUser2.cars.color += '--' //拦截了读取数据  拦截了修改数据或者是添加属性
        // delete proxyUser2.name //拦截到了删除数据
        // delete proxyUser2.cars.color //拦截了读取数据  拦截了删除数据





        // =================================================
        // 测试shallowReadonly
        const proxyUser3 = shallowReadonly({
                name: "小明",
                cars: {
                    color: "red"
                }
            })
            // proxyUser3.name = '小红' //只能读取数据，不能修改数据或者添加数据
            // proxyUser3.name += '--' //拦截了读取数据   只能读取数据，不能修改数据或者添加数据
            // proxyUser3.cars.color += '--' //拦截到了读取数据了   拦截不了深度的修改
            // delete proxyUser3.name //只能读取数据，不能删除数据
            // delete proxyUser3.cars.color //拦截了读取数据  拦截不了深度删除

        const proxyUser4 = readonly({
                name: "小明",
                cars: {
                    color: "red"
                }
            })
            // proxyUser4.name = '小红' //只能读取数据，不能修改数据或者添加数据
            // proxyUser4.name += '--' //拦截了读取数据   只能读取数据，不能修改数据或者添加数据
            // proxyUser4.cars.color += '--' //拦截到了读取数据了   只能读取数据，不能修改数据或者添加数据
            // delete proxyUser4.name //只能读取数据，不能删除数据
            // delete proxyUser4.cars.color //拦截了读取数据  只能读取数据，不能修改数据或者添加数据

        const ref1 = shallowRef({
                name: "小明",
                cars: {
                    color: "red"
                }
            })
            // ref1.value = '小红' //数据已更新, 去更新界面
            // ref1.value.cars = '--' //劫持不到修改

        const ref2 = ref({
                name: "小明",
                cars: {
                    color: "red"
                }
            })
            // ref2.value = '小红' //数据已更新, 去更新界面
            // ref2.value.cars = '--' //数据已更新, 去更新界面
    </script>
</body>

</html>